@extends('layouts.default')

@section('title', '编辑考核量表')

@push('scripts')
<script>
    var ScaleId = "{{ request()->get('id', 0) }}";
    var Title = '';
    layui.use(['layer','form','table','upload','laytpl','laydate','element','laypage'], function(){
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var upload = layui.upload;
        var laytpl = layui.laytpl;
        var laydate = layui.laydate;
        var element = layui.element;
        var laypage = layui.laypage;
        var files = []; //上传的文件数组

        renderSelect();

        laydate.render({
            elem: '#award-date'
            ,type: 'date'
            ,trigger: 'click'
        });

        // 提交
        form.on('submit(sub)', function(datas) {
            let data = datas.field;
            
            editScale(data, function(res) {
                if(res.code == '1'){
                    layer.msg('提交成功', {icon: 6, time: 1000}, function(){
                        window.history.back();
                    });
                }else{
                    layer.msg(res.msg, {icon: 5,shift : 6});
                }
            });
            
            return false;
        });

        //下拉框初始化
        async function renderSelect(){
            await renderDicSelect();
            await renderTermSelect();
            pageInit();
        }

        //字典下拉框数据渲染
        function renderDicSelect() {
            return new Promise((resolve) => {
                getDicListByCode({'diccode': 'LBCJ'}, function (res){
                    if(res.code === 1) {  
                        let d = res.data;

                        $('[data-role=lbcjList]').empty().append('<option value="">请选择</option>');
                        for (var i in d) {
                            $('[data-role=lbcjList]').append('<option value="' + d[i].itemcode + '">' + d[i].itemname + '</option>');
                        }
                        
                        form.render();

                        resolve();
                    }
                });
            });
        }

        //学期下拉框数据渲染
        function renderTermSelect() {
            return new Promise((resolve) => {
                getTermData({},function(res){
                    if(res.code == 1){
                        $('[data-role=termList]').empty().append('<option value="">请选择</option>');
                        for(var i in res.data){
                            $('[data-role=termList]').append('<option value="'+res.data[i].id+'">' + res.data[i].select_year + '</option>');
                        }
                                      
                        form.render('select');

                        resolve();
                    }
                });  
            });
        }

        //页面初始化
        function pageInit() {
            getScaleById({id: ScaleId}, function(res) {
                if(res.code === 1) { 
                    let Scale = res.data.scale;

                    form.val('addForm', {
                        'id': Scale ? Scale.id : 0,
                        "term_id": Scale ? Scale.term_id : '',
                        "name": Scale ? Scale.name : '',
                        "tier_code": Scale ? Scale.tier_code : '',
                        "level_code": Scale ? Scale.level_code : '',
                        "score": Scale && Scale.score > 0 ? Scale.score : '',
                        "enable": Scale ? Scale.enable : '',
                        "remark": Scale ? Scale.remark : '',
                        "type": Scale ? Scale.type : ''
                    });
                    
                    switch(Scale.type) {
                        case 1:
                            Title = '月考核量表'
                            break;
                        case 2:
                            Title = '年度考评量表'
                            break;
                        case 3:
                            Title = '教师能级量表'
                            break;
                        case 4:
                            Title = '骨干教师考核量表'
                            break;
                    }

                    $("#edit-title").html(Title);

                    if(res.data.scale.files_array.length>0){                   
                        layui.each(res.data.scale.files_array, function(i, d) {                              
                            files.push(d);
                            $('input[name=files]').val(JSON.stringify(files));
                            $('#test3').parent().find('.file-show').html('');
                            for(i in files) {
                                if(files[i]) {
                                    let fsHtml = '<div class="file-item"><span class="file-name">'+files[i].file_name+'</span><span class="layui-icon layui-icon-close-fill" onClick="fileDelete('+i+', 1)"></span></div>';
                                    $('#test3').parent().find('.file-show').append(fsHtml); 
                                }
                            }                             
                        });
                    } 

                    form.render();
                }
            });
        }

        upload.render({
            elem: '#test3'
            ,url: "{{route('uploads.upload')}}" //此处配置你自己的上传接口即可
            ,accept: 'file' //普通文件
            ,multiple: true
            ,allDone: function(obj){ //当文件全部被提交后，才触发
                if(obj.total == obj.successful) {
                    layer.msg('上传成功');
                } else {
                    layer.msg(obj.failed + '个文件上传失败！');
                }
            }
            ,done: function(res){
                files.push(res.data);            
                $('input[name=files]').val(JSON.stringify(files));
                $('#test3').parent().find('.file-show').html('');
                for(i in files) {
                    if(files[i]) {
                        let fsHtml = '<div class="file-item"><span class="file-name">'+files[i].file_name+'</span><span class="layui-icon layui-icon-close-fill" onClick="fileDelete('+i+', 1)"></span></div>';
                        $('#test3').parent().find('.file-show').append(fsHtml); 
                    }
                }
            }
        });

        //删除文件
        window.fileDelete = function (fk, ft) {
            if(ft == 1) {
                delete files[fk];
                $('input[name=files]').val(JSON.stringify(files));
                $('#test3').parent().find('.file-show').html('');
                for(i in files) {
                    if(files[i]) {
                        let fsHtml = '<div class="file-item"><span class="file-name">'+files[i].file_name+'</span><span class="layui-icon layui-icon-close-fill" onClick="fileDelete('+i+', 1)"></span></div>';
                        $('#test3').parent().find('.file-show').append(fsHtml);
                    }
                }
            }
        }

        //表单重置
        // $(".reset-form").on('click', function() {
        //     $("#member-input").remove();
        // });
        //页面返回
        $("#back-btn").on('click', function() {
            parent.layui.admin.closeAndJumpTab(5);
        });
        $(".copy-btn").on('click', function() {
            copyText($(this).prev('input').val());
        });
        
        //多选文件渲染删除
        $(document).on('click','.demo-delete-add',function(){
            $(this).parent().parent().remove();
        });
    });
</script>
<script id="demo" type="text/html">
@{{#  layui.each(d, function(index, item){ }}
@{{#  if(item){ }}
    <tr id="upload-@{{index}}">
        <td>@{{item.file_name}}</td>
        <td>@{{(item.size/1014).toFixed(1)}}kb</td>
        <td>
            <div class="layui-progress" lay-filter="progress-demo-@{{index}}">
                <div class="layui-progress-bar" lay-percent=""></div>
            </div>
        </td>
        <td><button type="button" style="display: block;margin: 0 auto;" class="layui-btn layui-btn-xs layui-btn-danger demo-delete-add">删除</button></td>
        <input type="hidden" name="files[]" value="@{{JSON.stringify(item)}}">
    </tr>
@{{#  } }}
@{{#  }); }}
</script>
@endpush

@section('content')
<style>
    .opt-panel{padding: 10px;}
    .panel-title h3{margin-bottom: 20px;font-weight: 800;}

    .opt-form{padding: 20px 5px;}
    .opt-area{display: flex;flex-direction: row-reverse;padding: 10px 20px;margin-bottom: 20px;}
    .opt-area button{margin-left: 10px;}
</style>

<div class="layui-row">
    <div class="layui-panel opt-panel">
        <form class="layui-form opt-form" action="" id="add-form" lay-filter="addForm">
            <div class="layui-row">
                <div class="panel-title">
                    <h3>量表管理 - 编辑</h3>
                </div>
                
                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>量表名称：</label>
                        <div class="layuik-input-inline">
                            <input type="text" name="name" required lay-verify="required" placeholder="请输入" lay-reqText="不能为空" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>分类：</label>
                        <div class="layuik-input-inline">
                            <select name="type"  lay-verify="required" lay-reqText="不能为空">
                                <option value="" >请选择</option>
                                <option value="1" >岗位竞聘</option>
                                <option value="2" >年度考核</option>
                                <option value="3" >教研活动</option>
                            </select>
                        </div>
                    </div>
                </div> 
                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>层级：</label>
                        <div class="layuik-input-inline">
                            <select name="tier_code" lay-filter="lbcjList" data-role="lbcjList" lay-verify="required" lay-reqText="不能为空"></select>
                        </div>
                    </div>
                    <div class="layuik-inline">
                        <label class="layuik-form-label"><i class="redstar">*</i>状态：</label>
                        <div class="layuik-input-inline">                            
                            <select name="enable" class="layui-select" lay-verify="required" lay-reqText="状态不能为空">
                                <option value="">请选择</option>
                                <option value="1">正常</option>
                                <option value="2">禁用</option>
                            </select>                     
                        </div>
                    </div>
                </div> 
                <div class="layuik-form-item">
                    <div class="layuik-inline">
                        <label class="layuik-form-label">说明：</label>
                        <div class="layuik-input-inline">
                            <textarea name="remark" id="" rows="3" class="layui-textarea" placeholder="请输入"></textarea>
                        </div>
                    </div>
                </div>
                <div class="layuik-form-item layuik-columns-two">
                    <div class="layuik-inline">
                        <label class="layuik-form-label">证明材料：</label>
                        <div class="layuik-input-inline layuik-upload">
                        <button type="button" class="layui-btn layui-btn-normal" id="test3"><i class="layui-icon"></i>上传文件</button>
                        <div class="file-show"></div>
                        <input style="display:none" type="text" name="files"  value="">
                        </div>
                    </div>        
                </div>

                <input type="text" name="id" style="display:none" value="">

                <div class="layui-form-item opt-area">
                    <div class="layui-input-block">    
                        <button class="layui-btn layui-btn-normal" lay-submit lay-filter="sub">提交</button>
                        <a href="javascript:history.go(-1);" ><button class="layui-btn layui-btn-primary" type="button">返回</button></a>                    
                    </div>
                </div>
            </div>
        </form>
    </div>   
</div>


@endsection
